<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .triangle {
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: blue;
    text-align: left;
  }
  .triangle:before,
  .triangle:after {
    content: '';
    position: absolute;
    background-color: inherit;
  }
  .triangle {
      width: 10em;
      height: 10em;
      /*border-top-right-radius: 60%;*/
  }
  .triangle:before {
      width: 10em;
      height: 10em;
      /*border-top-right-radius: 60%;*/
  }

  .triangle:after {
      width: 10em;
      height: 10em;
      /*border-top-right-radius: 60%;*/
  }

  .triangle {
    transform: translate(-50%, -50%) rotate(0deg) skewX(-30deg) scale(1, .866);
  }
  .triangle:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
  }
  .triangle:after {
    transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
  }
</style>
<body>
  <div class="triangle rounded"></div>
</body>
</html>